<template>
	<view class="vcode-input-body">
		<text
			class="vcode-input-item"
			:class="isBorderLine ? 'vcode-input-line' : 'vcode-input-border'"
			v-for="(v, index) in sum"
			:key="index"
			@tap="setFocus"
			:style="{
				borderColor: text.length === index ? borderActiveColor : text.length > index ? borderValueColor : borderColor,
				color: text.length > index ? borderValueColor : borderColor
			}"
		>
			{{ text[index] ? text[index] : '' }}
		</text>
		<input type="number" class="hidden-input" :value="yzmNums" :focus="focus" :maxlength="sum" @input="inputVal" @blur="setBlur" :password="isPassword" placeholder="验证码" />
	</view>
</template>

<script>
export default {
	name: 'VcodeInput',
	props: {
		sum: {
			type: Number,
			default: 6
		},
		isBorderLine: {
			type: Boolean,
			default: false
		},
		borderColor: {
			type: String,
			default: '#DADADA'
		},
		borderValueColor: {
			type: String,
			default: '#424456'
		},
		borderActiveColor: {
			type: String,
			default: '#FF6B00'
		},
		isAutoComplete: {
			type: Boolean,
			default: true
		},
		isPassword: {
			type: Boolean,
			default: false
		},
		yzm: {
			default: ''
		}
	},
	data() {
		return {
			focus: false,
			text: [],
			yzmNums: null
		};
	},
	watch: {
		yzm(newVal, oldVal) {
			this.yzmNums = newVal;
			const nums = newVal.split('');
			this.text = nums;
			this.$emit('vcodeInput', newVal);
		}
	},
	created() {
		setTimeout(() => {
			this.focus = true;
		}, 300);
	},
	methods: {
		getStyle(index) {
			let style = {};
			style.borderColor = this.borderColor;
			if (this.text.length > index) {
				style.borderColor = this.borderValueColor;
				style.color = this.borderValueColor;
			}
			if (this.text.length === index) {
				style.borderColor = this.borderActiveColor;
			}
			return style;
		},
		setBlur() {
			this.focus = false;
			uni.hideKeyboard(); // 隐藏键盘
		},
		setFocus() {
			setTimeout(() => {
				this.focus = true;
			}, 500);
			// void plus.key.showSoftKeybord();
		},
		inputVal(e) {
			let value = e.detail.value;
			if (this.isAutoComplete) {
				if (value.length >= this.sum) {
					this.focus = false;
					this.$emit('vcodeInput', value);
				}
			} else {
				this.$emit('vcodeInput', value);
			}
			if (this.isPassword) {
				let val = '';
				for (let i = 0; i < value.length; i++) {
					val += '●';
				}
				this.text = val;
			} else {
				this.text = value;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.vcode-input-body {
	margin-left: -36rpx;
	margin-right: -36rpx;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	.vcode-input-item {
		width: 76rpx;
		height: 85rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
		line-height: 85rpx;
		text-align: center;
		font-weight: 500;
	}
	.vcode-input-border {
		border-style: solid;
		border-width: 2rpx;
		border-color: $uni-border-color;
		border-radius: 5px;
	}
	.vcode-input-line {
		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		border-color: $uni-border-color;
	}
	.hidden-input {
		width: 1px;
		height: 1px;
		position: absolute;
		left: -1px;
		top: -1px;
	}
}
</style>
